<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="产品查看" width="70%">
    <div>
      <el-tabs v-model="activeName" stretch @tab-click="handleClick">
        <el-tab-pane label="产品组基本信息" name="first" class="btnFatcher">
          <el-card class="box-card">
            <el-row>
              <el-col :span="8">
                <div class="watch required">产品名称: {{ content.name }}</div>
              </el-col>
              <el-col :span="8">
                <div class="watch required">创建日期：{{ content.createTime }}</div>
              </el-col>
              <el-col :span="8">
                <div class="watch required">最后审核日期：{{ content.reviewDate }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <div class="watch required">产品类别：{{ content.type }}</div>
              </el-col>
              <el-col :span="8">
                <div class="watch air">排序号: {{ content.sequence }}</div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card1">
            <el-row v-for="item in content.platformList" :key="item.id">
              <el-col :span="12">
                <div class="watch required">产品所属平台：{{ item.platformName }}</div>
              </el-col>
              <!-- <el-col :span="12">
            <div class="watch required">运营商产品标识：{{ item.platformName }}</div>
              </el-col>-->
            </el-row>
          </el-card>

          <el-card class="box-card1">
            <el-row>
              <el-col :span="24">
                <div class="watch required">
                  产品所属cp:
                  <div v-for="(item, index) in content.cpList" :key="index" class="productCP">
                    <el-tag type="info">{{ item.cpName }}</el-tag>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card1">
            <el-row>
              <el-col :span="24">
                <div class="watch textaa">
                  <span>产品描述：{{ content.description }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card1">
            <el-row v-for="(item, index) in content.imageList" :key="item.id">
              <el-col :span="12" class="imgArr">
                <div class="productImgWord">
                  <span v-show="index === 0" style="vertical-align: top;">产品描述图片：</span>
                  <img class="imgItem" :src="item.imageUrl">
                </div>
              </el-col>
              <el-col :span="12">
                <div class="watch">
                  图片标识：
                  {{ item.imageLogo }}
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card2">
            <el-row>
              <el-col :span="12">
                <div class="watch">
                  产品链接：
                  12312312313
                </div>
              </el-col>
              <el-col :span="12">
                <div class="watch">链接标识：12312312313131</div>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="box-card2">
            <el-row>
              <el-col :span="24">
                <div class="watch bold">产品依赖关系配置：</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="watch" style="padding-left: 20px;">产品名称：电影大礼包</div>
              </el-col>
              <el-col :span="12">
                <div class="watch">产品ID：88888</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <div class="watch" style="padding-left: 20px;">产品名称：电影大礼包</div>
              </el-col>
              <el-col :span="12">
                <div class="watch">产品ID：88888</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" :offset="2" style="margin-top:8px;">
                <span style="font-size:12px;color:red;">订购依赖关系产品是订购本产品的前提条件。用户需要先订购依赖关系产品，才可以订购本产品</span>
              </el-col>
              <el-col :span="10" :offset="2" style="margin-top:9px;">上面产品中订购任一产品后即可满足依赖关系条件</el-col>
            </el-row>
          </el-card>
          <el-card class="box-card2">
            <el-row>
              <el-col :span="24">
                <div class="watch">
                  产品依赖关系配置：
                  12312312
                </div>
              </el-col>
              <el-col :span="24">
                <div class="watch">产品互斥关系配置：12312312312</div>
              </el-col>
              <el-col :span="22" :offset="2" style="margin-top:8px;">
                <span
                  style="font-size:12px;color:red;"
                >用户如果已经订购互斥关系产品，则无法订购本产品。建议用户先退订互斥关系产品，再订购本产品。</span>
              </el-col>
            </el-row>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="关联产品" name="second" class="btnFatcher">
          <span class="tariffList">已关联产品服务</span>
          <div class="app-table">
            <el-table :data="content.serviceList" border style="width: 100%">
              <el-table-column label="服务ID">
                <template slot-scope="scope">
                  <el-popover
                    v-if="scope.row.serviceId"
                    :content="scope.row.serviceId"
                    placement="top"
                    trigger="hover"
                  >
                    <span slot="reference" style="cursor:pointer">{{ scope.row.serviceId }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="服务名称">
                <template slot-scope="scope">
                  <el-popover
                    v-if="scope.row.name"
                    :content="scope.row.name"
                    placement="top"
                    trigger="hover"
                  >
                    <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === '0'">未提交</span>
                  <span v-if="scope.row.status === '1'">已提交</span>
                  <span v-if="scope.row.status === '2'">废弃</span>
                </template>
              </el-table-column>
              <el-table-column label="服务来源">
                <template slot-scope="scope">
                  <el-popover
                    v-if="scope.row.source"
                    :content="scope.row.source"
                    placement="top"
                    trigger="hover"
                  >
                    <span slot="reference" style="cursor:pointer">{{ scope.row.source }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="节目来源">
                <template slot-scope="scope">
                  <el-popover
                    v-if="scope.row.programSource"
                    :content="scope.row.programSource"
                    placement="top"
                    trigger="hover"
                  >
                    <span slot="reference" style="cursor:pointer">{{ scope.row.programSource }}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <!-- <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    plain
                    round
                    size="mini"
                    icon="el-icon-third-tongyong"
                    @click="cancelServiceConnect(scope.$index)"
                  >取消关联</el-button>
                </template>
              </el-table-column>-->
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="btnArrss">
        <el-button type="primary" size="small" plain round @click="check()">取消</el-button>
        <el-button
          v-show="activeName !== 'first'"
          type="primary"
          size="small"
          round
          @click="activeName = 'first'"
        >上一步</el-button>
        <el-button
          v-show="activeName === 'first'"
          type="primary"
          size="small"
          round
          @click="activeName = 'second'"
        >下一步</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { watchInfo } from '@/api/productCheck.js'
import { getSelectS } from '@/api/product.js'
export default {
  inject: ['platForm'],
  props: {
    watchDetails: {
      type: Boolean,
      default: false
    },
    productScope: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      activeName: 'first',
      showPointDialog: false,
      productCategoryArr: [], // 产品类别
      content: {}
    }
  },
  watch: {
    watchDetails(val) {
      this.showPointDialog = val
      if (val) {
        this.loadProductType().then((list) => {
          const productTypeList = list
          var id = this.productScope.row.id
          var productId = this.productScope.row.productId
          watchInfo({
            id: id,
            productId: productId
          }).then((res) => {
            const lastTesult = res.data
            if (res.resultCode === '0000') {
              // 产品类别
              productTypeList.forEach((item) => {
                if (item.typeId === lastTesult.productCategory) {
                  lastTesult.type = item.typeName
                }
              })
              console.log(lastTesult)
              this.content = lastTesult
            }
          })
        })
      }
    }
  },
  methods: {
    loadProductType() {
      return new Promise((resolve, reject) => {
        // 产品类别
        var typess = {
          functionType: 'productCategory'
        }
        getSelectS(typess).then((res) => {
          if (res.resultCode === '0000') {
            resolve(res.data.list)
          } else {
            reject()
          }
        })
      })
    },
    handleClick() {
      console.log('2')
    },
    check() {
      this.showPointDialog = false
      this.activeName = 'first'
      this.$emit('closeDetails')
    }
  }
}
</script>

<style>
.box-card {
  margin-top: 10px;
}
.box-card1 {
  margin-top: 10px;
}
.box-card2 {
  margin-top: 10px;
  /* margin-bottom: 45px; */
}
.watch {
  margin: 10px 0;
}
.bold {
  font-weight: bold;
}
.el-card__header {
  padding: 9px 20px !important;
}
.productImgWord {
  height: 87px;
  vertical-align: middle;
  display: inline-block;
}
.imgItem {
  width: 90px;
  height: 90px;
  margin: 0 5px;
}
.productCP {
  display: inline-block;
  margin: 0 5px;
}
.btnArrss {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
